<template>
  <VueOfficeDocx
    :src="fileStore.curFileInfo.url"
    style="width: 100%"
    @rendered="loadHandle"
    :options="{ inWrapper: true, breakPages: true }"
  />
</template>

<script setup>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import { useFileStore, useFlagStore } from '@/stores'
const fileStore = useFileStore()
const flagStore = useFlagStore()
onMounted(() => {
  flagStore.setPreviewSpinner(true)
})
const loadHandle = e => {
  flagStore.setPreviewSpinner(false)
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>

<style lang="scss">
section.docx {
  width: 100% !important;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
  margin-bottom: 50px;
}
</style>
